<template>
    <el-card style="margin-top: 15px">
        <div class="center-nav" ref="centerNavRef" style="position: relative;height: 200px">
            <div class="center-nav-item">
                <span style="width: 100px;">兴趣技能:</span>
                <div>
                    <el-button v-for="arr in arrs" :key="arr">{{ arr }}</el-button>
                </div>
            </div>
            <div class="center-nav-item">
                <span style="width: 100px;">兴趣技能:</span>
                <div>
                    <el-button v-for="arr in arrs" :key="arr">{{ arr }}</el-button>
                </div>
            </div>
            <div class="center-nav-item" v-if="isShow">
                <span style="width: 100px;">兴趣技能:</span>
                <div>
                    <el-button v-for="arr in arrs" :key="arr">{{ arr }}</el-button>
                </div>
            </div>
            <div class="center-nav-item" v-if="isShow">
                <span style="width: 100px;">兴趣技能:</span>
                <div>
                    <el-button v-for="arr in arrs" :key="arr">{{ arr }}</el-button>
                </div>
            </div>
            <div class="center-nav-item" v-if="isShow">
                <span style="width: 100px;">兴趣技能:</span>
                <div>
                    <el-button v-for="arr in arrs" :key="arr">{{ arr }}</el-button>
                </div>
            </div>
            <div @click="toBig" ref="toBigButtonRef"
                 style=" margin:0 auto;position: absolute;bottom: 10px;left: 50%;color: #FA3684;cursor: pointer">
                展开全部
            </div>
        </div>
    </el-card>
</template>
<script lang="ts">
export default {
    name: "TopNav"
}
</script>
<script setup lang="ts">
import {ref} from "_vue@3.2.39@vue";
import {defineProps} from "vue";

const props=defineProps({
    arrs:[]
})
const centerNavRef = ref()
const toBigButtonRef = ref()
const isShow = ref(false)
const toBig = () => {
    if (toBigButtonRef.value.innerHTML === '展开全部') {
        isShow.value = true
        toBigButtonRef.value.innerHTML = '收起'
        centerNavRef.value.style.height = 500 + 'px'
        console.log(1)
    } else {
        isShow.value = false
        toBigButtonRef.value.innerHTML = '展开全部'
        centerNavRef.value.style.height = 200 + 'px'
        console.log(2)
    }
    console.log(centerNavRef.value)
    // centerNavRef.value.style.height
}
</script>

<style scoped>

</style>
